<script setup>
import {onLoad, onShow} from "@dcloudio/uni-app";
import {getConfigAPI, getFreeVipAPI, lookVideoAPI, redeemMemberAPI} from "../../services/me";
import {ref} from "vue";
import {conUtils} from "../../utils/conUtils";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {BaseImgUrl} from "../../utils/lshttp";
// #ifdef H5
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const commonInfoStore = useCommonInfoStore()
// #endif

const userInfoStore = useUserInfoStore()
const freeLists = ref([])
const okShow = ref(false)
const user_id = ref()
const platform = ref()

const config = ref({
  week_member_gold_coin: 0,
  month_member_gold_coin: 0,
  my_gold_coin: 0
})

// 若在开发者工具中无法预览广告，请切换开发者工具中的基础库版本
// 在页面中定义激励视频广告
let videoAd = null
onShow(async () => {
  // #ifdef APP-PLUS || H5
  if (userInfoStore.isLogin()) {
    await getTaskInfo()
  }
  // #endif
  // #ifdef MP
  if (userInfoStore.isLogin("您的账号未登录小程序，现在去登录？")) {
    await getTaskInfo()
    if (user_id.value) {
      if (user_id.value != userInfoStore.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: platform.value + "账号ID：" + user_id.value + "和当前小程序登录的账号ID：" + userInfoStore.userInfo.id + "不一致，只有当前登录的【小程序的账号】可以获取奖励！",
          confirmText: '去看视频',
          success: (res) => {
            if (res.confirm) {
              lockAD()
            }
          }
        })
      } else {
        await uni.showToast({title: '账号一致，加载视频中', icon: 'none'})
        await lockAD()
      }
    }
  }
  // #endif
})

onLoad((options) => {
  user_id.value = options.user_id
  platform.value = options.platform
  console.log('options',options)
  // #ifdef H5
  commonInfoStore.initJSDKConfig()
  // #endif
  // #ifdef MP
  // 在页面onLoad回调事件中创建激励视频广告实例
  if (wx.createRewardedVideoAd) {
    videoAd = wx.createRewardedVideoAd({
      adUnitId: 'adunit-5f24b787d40bb2df'
    })
    videoAd.onLoad(() => {

    })
    videoAd.onError((err) => {
      console.error('激励视频广告加载失败', err)
      uni.showToast({title: '激励视频广告加载失败', icon: 'none'})
    })
    videoAd.onClose(async (res) => {
      // 用户点击了【关闭广告】按钮
      if (res && res.isEnded) {
        // 正常播放结束，可以下发游戏奖励
        conUtils("videoAd", '正常播放结束，可以下发游戏奖励')
        const lookVideoRes = await lookVideoAPI()
        await getTaskInfo()
        await uni.showToast({title: lookVideoRes.msg, icon: 'none', duration: 2000})
      } else {
        // 播放中途退出，不下发游戏奖励
        conUtils("videoAd", '播放中途退出，不下发游戏奖励')
        await uni.showToast({title: '播放中途退出没有奖励哦', icon: 'none', duration: 2000})
      }
    })
  }
  // #endif
})

const getTaskInfo = async () => {
  const configRes = await getConfigAPI()
  config.value = configRes.result
  const res = await getFreeVipAPI()
  freeLists.value = res.result
}

//领取会员
const redeemMember = async (type) => {
  const res = await redeemMemberAPI(type)
  await getTaskInfo()
  await uni.showToast({
    title: res.msg,
    icon: 'none'
  })
}
const lockAD = async () => {
  // #ifdef MP
  // 用户触发广告后，显示激励视频广告
  if (videoAd) {
    await uni.showLoading({title: "正在加载视频"})
    videoAd.show().catch(() => {
      // 失败重试
      videoAd.load()
          .then(() => {
            uni.hideLoading()
            videoAd.show()
          })
          .catch(err => {
            console.error('激励视频 广告显示失败', err)
          })
    }).then(() => {
      uni.hideLoading()
    })
  }
  // #endif
  // #ifdef APP-PLUS
  const idApp = 'gh_45626294c5df';
  plus.share.getServices(function (res) {
    const wxServices = res.find(i => i.id.toString() === 'weixin')
    if (wxServices) {
      wxServices.launchMiniProgram({
        id: idApp,
        path: "/pages/member/membertask?user_id=" + userInfoStore.userInfo.id + '&platform=APP',
        // type: 1
      });
    }
  }, function (res) {
    console.log(JSON.stringify(res));
  });
  // #endif
}
// 金币明细
const handleDetails = () => {
  uni.navigateTo({
    url: '/pages/member/golddetails?my_gold_coin=' + config.value.my_gold_coin
  })
}

// 去完成
const mianfeiling = (item) => {
  if (item.title === '邀请好友得会员') {
    uni.switchTab({
      url: '/pages/makemoney/makemoney'
    })
  } else {
    uni.navigateTo({
      url: '/pages/signin/signin'
    })
  }
}

const okBack = async () => {
  if(platform.value){
    await uni.switchTab({
      url: '/pages/index/index',
    });
  }else {
   await uni.navigateBack()
  }

}
</script>
<template>
  <view class="return_title">
    <u-status-bar></u-status-bar>
    <view class="content" @click="okBack">
      <u-icon v-if="!platform" name="arrow-left" color="#ffffff" size="20"></u-icon>
      <u-icon v-else name="home" color="#ffffff" size="26"></u-icon>
      <text class="title">做任务领会员</text>
    </view>
  </view>
  <view>
    <view class="wrapbg">
      <view class="jf_detail">
        <view class="l_name">我的金币：
          <text>{{ config.my_gold_coin }}</text>
        </view>
        <view class="detail_text" @click="handleDetails()">金币明细</view>
      </view>
      <view class="white_content">
        <view class="rw_name">
          <text class="l_text">做任务 领取金币兑换会员</text>
          <!-- <text class="r_all">全部任务</text> -->
        </view>
        <view class="small_box" v-for="(item, index) in freeLists" :key="index">
          <view class="img_text">
            <view class="l_icon">
              <image :src="item.image"></image>
            </view>
            <view class="l_text">
              <view class="title">{{ item.title }}</view>
              <view class="desc">{{ item.description }}</view>
            </view>
          </view>
          <view class="r_btn" @click="mianfeiling(item)">去完成</view>
        </view>
        <view class="small_box">
          <view class="img_text">
            <view class="l_icon">
              <image :src="BaseImgUrl + '/images/free/get_member4.png'"></image>
            </view>
            <view class="l_text">
              <view class="title">周会员</view>
              <view class="desc">{{ config.week_member_gold_coin }}金币可以兑换周会员7天</view>
            </view>
          </view>
          <view class="r_btn" @click="redeemMember('week')">立即兑换</view>
        </view>
        <view class="small_box">
          <view class="img_text">
            <view class="l_icon">
              <image :src="BaseImgUrl + '/images/free/get_member2.png'"></image>
            </view>
            <view class="l_text">
              <view class="title">月会员</view>
              <view class="desc">{{ config.month_member_gold_coin }}金币可以兑换月会员31天</view>
            </view>
          </view>
          <view class="r_btn" @click="redeemMember('month')">立即兑换</view>
        </view>
        <view class="small_box" >
          <view class="img_text">
            <view class="l_icon">
              <image :src="BaseImgUrl + '/images/free/get_member6.png'"></image>
            </view>
            <view class="l_text">
              <view class="title">看视频领金币</view>
              <view class="desc">每日看视频最多可领取200金币</view>
            </view>
          </view>
          <view class="r_btn" style="position: relative" @click="lockAD">
            看视频
            <!-- #ifdef H5 -->
<!--            env-version="develop"-->
            <wx-open-launch-weapp id="launch-btn"
                                  username="gh_45626294c5df"
                                  :path="'/pages/member/membertask?user_id=' + userInfoStore.userInfo.id + '&platform=H5'"
                                  style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>

    <u-modal :show="okShow" content="当月任务已完成,请下月再来哦" confirm-text="我已知晓"
             @confirm="okBack()"></u-modal>
  </view>
</template>
<style>
page {
  background: #eef2f9 url('https://lsz.lszbg.com/public/uploads/test/jf_bg.png') no-repeat top center;
  background-size: 100%;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
</style>
<style lang="scss" scoped>

.return_title {
  width: 100%;
  padding: 20rpx 30rpx 16rpx;
  position: fixed;
  color: white;
  z-index: 999;
  top: 0;
  background: url("https://lsz.lszbg.com/public/uploads/test/jf_bg.png");
  background-size: cover;

  .content {
    display: flex;
    align-items: center;
  }

  .title {
    margin-right: 38rpx;
    font-size: 36rpx;
    font-weight: normal;
    flex: 1;
    text-align: center;
  }
}

image {
  width: 100%;
  height: 100%;
}

.wrapbg {
  position: relative;
  box-sizing: border-box;
  padding: 66% 30rpx 30rpx;

  .jf_detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .l_name {
      font-weight: bold;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 22px;
      text-shadow: 0 3px 4px #FE5C28;
      display: flex;
      align-items: center;
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      text {
        font-size: 36rpx;
      }

      &:before {
        content: '';
        display: inline-block;
        width: 76rpx;
        height: 60rpx;
        background: url('https://lsz.lszbg.com/public/uploads/test/sz_icon.png') no-repeat center center / 100% 100%;
        margin-right: 20rpx;
      }
    }

    .detail_text {
      font-size: 26rpx;
      color: #fff;
    }
  }

  .white_content {
    background-color: #fff;
    box-sizing: border-box;
    padding: 34rpx 30rpx;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .rw_name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l_text {
        font-size: 32rpx;
        color: #000;
      }

      .r_all {
        font-size: 24rpx;
        color: #888;
        display: flex;
        align-items: center;

        &:after {
          content: '';
          display: inline-block;
          width: 28rpx;
          height: 28rpx;
          background: url('https://lsz.lszbg.com/public/uploads/test/right_arrow.png') no-repeat center center / 100% 100%;
          margin-left: 10rpx;
        }
      }
    }

    .small_box {
      box-sizing: border-box;
      padding: 40rpx 0;
      border-bottom: 1px solid #EBEBEB;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      &:last-child {
        border: none;
        padding-bottom: 0;
      }

      .img_text {
        display: flex;
        align-items: center;

        .l_icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }

        .l_text {
          .title {
            font-size: 28rpx;
            color: #333;
          }

          .desc {
            font-size: 24rpx;
            color: #888;
            margin-top: 10rpx;
          }
        }
      }

      .r_btn {
        width: 160rpx;
        height: 56rpx;
        background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);
        border-radius: 50rpx;
        line-height: 56rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;

        &.fisih_btn {
          background: linear-gradient(270deg, #9B9B9B 0%, #777777 100%);
        }
      }
    }

    .cards_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }
  }

  .c_small {
    width: 48%;
    margin-top: 30rpx;
    text-align: center;

    .img {
      width: 100%;
      height: 220rpx;
    }

    .title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .price {
      font-size: 28rpx;
      color: #FC764B;
      font-weight: bold;
      margin-top: 10rpx;
    }
  }
}

.top-box {
  position: absolute;
  z-index: 2;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.return_img {
  width: 20rpx;
  height: 32rpx;
}

.menu-icon {
  margin-right: 20rpx;

  image {
    width: 100rpx;
    height: 100rpx;
  }
}

.lianxu {
  font-weight: bold;
  color: #DCB18A;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.yiqiandao {
  color: #DCB18A;
}

.quwanc {
  border: 1px solid #DCB18A;
  border-radius: 200rpx;
  color: #DCB18A;
  width: 120rpx;
  height: 50rpx;
  line-height: 46rpx;
  text-align: center;
  margin-left: auto;
  font-size: 24rpx;
}

.lingqubtn {
  border-radius: 200rpx;
  color: #4F2600;
  width: 150rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  margin-left: auto;
  font-size: 25rpx;
  background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
}

.viplingqu {
  text-align: center;
  padding: 80rpx 0;
  background-color: #fff;

  image {
    width: 300rpx;
  }

  .gongxi {
    font-weight: bold;
    margin-top: 14rpx;
    font-size: 35rpx;
    color: #DCB18A;
  }

  .youxiaioqi {
    font-size: 32rpx;
    color: #DCB18A;
    margin: 20rpx 0 40rpx 0;
  }

  .lookbtn {
    color: #4F2600;
    border-radius: 200rpx;
    padding: 20rpx 10rpx;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    font-size: 32rpx;
    background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
  }
}
</style>
